<template>
    <view class="globe_back">
        <view style="height: 16px"></view>
        <!-- <button class="u-reset-button reset" open-type="chooseAvatar" @chooseavatar="handleAvatar"> -->
            <view  class="p_32_24 br_24 back_fff flex justify_content_between align_items_center" style="margin: 0 16px 16px 16px">
                <view class="flex align_items_center">
                    <text class="f_28 cl_333A47">修改头像</text>
                </view>
                <view class="flex align_items_center">
                       <u-upload
                       	:fileList="fileList7"
                       	@afterRead="afterRead"
                       	@delete="deletePic"
                       	name="7"
                       	multiple
                       	:maxCount="1"
                       	width="30"
                       	height="30"
						:previewFullImage="false"
                       >
					   <!-- <view style="width: 30px; height: 30px; overflow: hidden; border-radius: 50%"> -->
                             
						<!-- </view> -->
                       	<!-- <image class="img_526" :src="urls+ 'sfz1.png'" mode=""></image> -->
                       </u-upload>
					   <image class="img_32" src="/static/imgs/right.png" mode=""></image>
                </view>
            </view>
        <!-- </button> -->
        <view @click="nameShow = true" class="p_32_24 br_24 back_fff flex justify_content_between align_items_center" style="margin: 0 16px 16px 16px">
            <view class="flex align_items_center">
                <text class="f_28 cl_333A47">昵称</text>
            </view>
            <view class="flex align_items_center">
                <view>{{ userInfo.nickname ? userInfo.nickname : '' }}</view>
                <image class="img_32" src="https://jiuyuan.smomotbo.com/static/imgs/query-info/next-icon.png" mode=""></image>
            </view>
        </view>
        <!-- <button class="u-reset-button reset" open-type="getPhoneNumber" @getphonenumber="handleMobile"> -->
            <view class="p_32_24 br_24 back_fff flex justify_content_between align_items_center" style="margin: 0 16px 16px 16px" @click="numberShow = true">
                <view class="flex align_items_center">
                    <text class="f_28 cl_333A47">手机号</text>
                </view>
                <view class="flex align_items_center">
                    <view>{{ userInfo.mobile ? userInfo.mobile : '' }}</view>
                    <image class="img_32" src="https://jiuyuan.smomotbo.com/static/imgs/query-info/next-icon.png" mode=""></image>
                </view>
            </view>
			<view style="height: 100px"></view>
			<view class="addBtn back_3377FF br_24 cl_fff" @click="out()" >退出登录</view>
        <!-- </button> -->
        <!-- 修改头像弹窗 -->
        <u-popup :show="show" mode="bottom" @close="close" bgColor="transparent">
            <view class="back_fff br_24 mb_24 p_24 txBtn">
                <text class="line_F7FAFF photo">拍照</text>
                <text class="photo">从相册选择</text>
            </view>
            <view class="back_fff br_24 p_24 txBtn cl_FF6401" @click="close">取消</view>
        </u-popup>
        <!-- 修改昵称弹窗 -->
        <u-popup :show="nameShow" mode="center" @close="nameClose" round="8">
            <view class="p_32">
                <view class="nameTitle fw_bold f_32 mt_8">修改昵称</view>
                <view class="newName mt_32">
                    <text class="f_28 cl_666B75">昵称</text>
                    <input class="name f_28 back_F7F7F7 br_8" v-model="userInfo.nickname" type="text"  placeholder="请输入您的新昵称" />
                </view>
                <view class="flex justify_content_between">
                    <view class="nameBtn back_F7F7F7 cl_333A47 f_32 br_8" @click="numberClosec">取消</view>
                    <view class="nameBtn back_3377FF cl_fff f_32 br_8" @click="nameClose">确认</view>
                </view> 
            </view>
        </u-popup>
        <!-- 修改手机号弹窗 -->
        <u-popup :show="numberShow" mode="center" @close="numberClosec" round="8">
            <view class="p_32">
                <view class="nameTitle fw_bold f_32 mt_8">修改手机号</view>
                <view class="newName mt_32">
                    <text class="f_28 cl_666B75">手机号</text>
                    <view class="flex name back_F7F7F7 br_8 justify_content_between">
                        <input style="height: 92rpx; width: 70%" class="f_28" type="number" v-model="phone" placeholder="请输入您的手机号" />
						<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" 
								@change="codeChange">
						</u-code>
                        <text style="width: 30%" class="f_28 cl_3377FF" @click="getCode()">{{tips}}</text>
                    </view>
                </view>
                <view class="newName mt_32">
                    <text class="f_28 cl_666B75">验证码</text>
                    <input class="name f_28 back_F7F7F7 br_8" type="number" v-model="codes" placeholder="输入验证码" />
                </view>
                <view class="flex justify_content_between">
                    <view class="nameBtn back_F7F7F7 cl_333A47 f_32 br_8" @click="numberClosec">取消</view>
                    <view class="nameBtn back_3377FF cl_fff f_32 br_8" @click="numberClose">确认</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import { upload, memberInfo, codeByMobile, setMemberInfo } from '@/api';
export default {
    data() {
        return {
            show: false,
            nameShow: false,
            numberShow: false,
            nickname: '',
            avatarUrl: '',
            userInfo: {},
			fileList7:[],
			image7:[],
			seconds:60,
			tips:'获取验证码',
			phone:'',
			codes:'',
        };
    },
    onShow() {
        this.getMemberInfo();
    },
    methods: {
        handleMobile({ detail }) {
            console.log(detail.code, detail)
            codeByMobile(detail.code).then((res) => {
                this.getMemberInfo();
            });
        },
        getMemberInfo() {
			this.$.ajax(1,"POST","users/user_index",{},(res)=>{
			  if(res.code==200){
				    	this.userInfo = res.data;
						if(res.data.avatar){
							if(!this.fileList7.join(',')){
								this.fileList7.push({url:res.data.avatar})
							}
						
						}
						
			  }else{
			     this.$.ti_shi(res.msg);
			  }
			})
           
        },
        changeName(e) {
            this.nickname = e.detail.value;
        },
        handleAvatar(e) {
            this.avatarUrl = e.detail.avatarUrl;
            console.log('e.detail', e.detail);
            upload(e.detail.avatarUrl, 'image').then(({ data }) => {
                console.log(data);
                const { hash } = data.data;
                setMemberInfo({ meta: { avatar: hash } }).then((res) => {
                    this.getMemberInfo();
                });
            });
        },
        close() {
            this.show = false;
        },
        nameClose() {
            // if (this.nickname && this.nickname != this.userInfo.nickname) {
            //     setMemberInfo({ nickname: this.nickname }).then((res) => {
            //         this.getMemberInfo();
            //     });
            // }
			this.upda(2)
            this.nameShow = false;
        },
        numberClose() {
			this.upda(3)
            
        },
		numberClosec() {
			this.numberShow = false;
			this.nameShow = false;
			
		},
				
		// 删除图片
		deletePic(event) {
			
			if(event.name==7){
				this.image7.splice(event.index, 1)
			}

			this[`fileList${event.name}`].splice(event.index, 1)
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url,event.name)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},
		uploadFilePromise(url,event_name) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: this.$.ajax_url+'common/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (res) => {

						if(event_name==7){
							this.image7.push(JSON.parse(res.data).data.url)
						}
                        this.upda(1)
						console.log(res,event_name)
						setTimeout(() => {
							resolve(res.data.data)
						}, 1000)
					}
				});
			})
		},
		
		upda(e){
			var that = this
			let data={
				e:e
			}
			   
			   if(e==1){
				    data.avatar=that.image7.join(',')
			   }
			   if(e==2){
			   		data.nickname=that.userInfo.nickname
			   }
			   if(e==3){
				   if(!that.phone){
				   				   this.$.ti_shi('请输入手机号！')
				   				   return;
				   }
				   if(!that.codes){
				   				   this.$.ti_shi('请输入验证码！')
				   				   return;
				   }
				   
			   		data.mobile=that.phone
					data.code=that.codes
					data.is_type='xg_mobile'
			   }
			   
			that.$.ajax(1,"POST","users/user_up",data,(res)=>{
			  if(res.code==200){
				       that.$.ti_shi(res.msg)
					   that.getMemberInfo();
					   this.numberShow = false;
				    	/* this.userInfo = res.data;
						this.fileList7.push(res.data.avatar) */
			  }else{
			     that.$.ti_shi(res.msg);
			  }
			})
		},
		out(){
			this.$.set_data("vuex_token", '')
			
			this.$.ti_shi('已退出');
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/home/home'
				})
			}, 1000);
			
		},
	   codeChange(text) {
		   console.log(text)
					this.tips = text;
				},
				getCode() {
					if(!this.phone){
						   this.$.ti_shi('请输入手机号！')
						   return;
					}
					this.code()
					if(this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						setTimeout(() => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}, 2000);
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				},
				end() {
					uni.$u.toast('倒计时结束');
				},
				start() {
					uni.$u.toast('倒计时开始');
				},
				code(){
					this.$.ajax(1,"POST","sms/smscode",{
						mobile:this.phone,
						event:'xg_mobile'
					},(res)=>{
					  if(res.code==200){
						    	
								
					  }else{
					     this.$.ti_shi(res.msg);
					  }
					})
				}
    }
};
</script>

<style scoped lang="scss">
.addBtn {
	width: 686rpx;
	height: 100rpx;
	line-height: 100rpx;
	position: fixed;
	bottom: 164rpx;
	left: 50%;
	margin-left: -343rpx;
	text-align: center;
}
.reset {
    border-radius: 0px;
    background-color: #00000000;
    padding: 0;
    margin: 0;
    line-height: initial;
    box-sizing: none;
}

.reset::after {
    border-radius: 0px;
    border: 0px;
}

.txBtn {
    margin: 8px 16px;
    text-align: center;
}

.photo {
    display: block;
    padding: 8px 0;
}

.nameTitle {
    text-align: center;
}

.name {
    width: 574rpx;
    height: 92rpx;
    line-height: 92rpx;
    padding: 0 24rpx;
    margin-top: 10px;
}

.nameBtn {
    width: 298rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    display: inline-block;
    margin-top: 64rpx;
}
</style>
